<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <table border="1">
            <caption>个人信息</caption>
            <tr><td>照片：</td><td><img :src="p.url" width="100"></td></tr>
            <tr><td>姓名：</td><td>{{p.name}}</td></tr>
            <tr><td>年龄：</td><td>{{p.age}}</td></tr>
            <tr><td>好友：</td><td>
                <ul>
                    <li v-for="name in p.friends">{{name}}</li>
                </ul>
            </td></tr>
        </table>
        <input type="button" value="加载数据" @click="loadInfo()">
    </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"",
            p:{
                name:"",
                age:"",
                url:"",
                friends:[]
            }
        },
        methods:{
            loadInfo(){
                v.p = {
                    name:"诸葛亮",
                    age:"50",
                    url:"zgl.jpg",
                    friends:["张飞","关羽","刘备"]
                }
            }
        }
    })
</script>
</html>
